<template>
  <div style=" border-bottom: 1px solid rgba(151, 151, 151, 0.2);" class="from-input-box">
    <div class="from-input-tit cenLeft ">
      <span :class="{'checkNot':!thisComponen.attribute.ifCheck}" :style="[{color:$store.state.themeColor}]" class="from-input-tit-check">
        *
      </span>
      {{ thisComponen.attribute.titName }}
      <div v-if="thisComponen.attribute.filedCode=='uTel'" class="select-phone cenLeft">
        +{{thisComponen.attribute.areaCode}}
        <img v-if="!isReadonly" src="https://gw.alicdn.com/tfs/TB1pQsSHmzqK1RjSZFHXXb3CpXa-200-200.png">
        <co-select v-if="!isReadonly" v-model.trim="thisComponen.attribute.areaCode" style=" cursor: pointer;" title="电话国家码" search-placeholder="请输入" type="popup" :data="selectList" placeholder="请输入" class="from-input co-select-dev" />
      </div>
    </div>
    <input :readonly="isReadonly" v-model.trim="thisComponen.attribute.filedValue" style=" text-align: left;" :class="{'haveSelectPhone':thisComponen.attribute.filedCode=='uTel'}" :maxLength="thisComponen.attribute.maxLength" :placeholder="thisComponen.attribute.placeholder" type="text" class="from-input">
  </div>
</template>
<script>
import areaCode from "./../areaCode.json";
export default {
  props: ["thisComponen", "isReadonly"],
  data() {
    return {
      selectList: []
    };
  },
  created() {
    if (this.thisComponen.attribute.filedCode == "uTel") {
      this.selectList = [];
      for (let i = 0; i < areaCode.length; i++) {
        let obj = {
          label: `${areaCode[i].name}(${areaCode[i].tel})`,
          value: areaCode[i].tel
        };
        this.selectList.push(obj);
      }
    }
  }
};
</script>


<style scoped>
.haveSelectPhone {
  padding-left: 236px;
}
.co-input::after {
  border: none !important;
  height: 0px !important;
}
.co-select-dev {
  width: 100% !important;
  padding-right: 2px;
  padding-left: 2px;
  opacity: 0;
}
</style>
